<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>淘宝试衣</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <!-- 顶部状态栏 -->
        <div class="status-bar">
            <div class="status-time">2:55</div>
            <div class="status-icons">
                <span class="icon-message"></span>
                <span class="icon-message"></span>
                <span class="icon-search"></span>
                <span class="icon-message"></span>
                <span class="icon-hexagon"></span>
                <span class="icon-more"></span>
            </div>
            <div class="status-right">
                <span class="icon-nfc"></span>
                <span class="icon-alarm"></span>
                <span class="icon-bluetooth"></span>
                <span class="icon-network">5G</span>
                <span class="icon-signal"></span>
                <span class="icon-lte">4G</span>
                <span class="icon-signal-bars"></span>
                <span class="icon-battery">74%</span>
            </div>
        </div>

        <!-- 头部导航 -->
        <div class="header">
            <div class="header-left">
                <span class="icon-back"></span>
            </div>
            <div class="header-title">时空衣橱</div>
            <div class="header-right">
                <button class="btn-rule">规则</button>
                <span class="icon-more-vert"></span>
                <span class="icon-camera-circle"></span>
            </div>
        </div>

        <!-- 公告栏 -->
        <div class="announcement">
            <span class="announcement-text">公告："时空衣橱"全新功能上线，体验智能搭配</span>
            <span class="icon-close"></span>
        </div>

        <!-- 主体内容 -->
        <div class="main-content">
            <div class="model-container">
                <!-- 使用base64格式的灰色占位图，实际项目中请替换为真实图片 -->
                <img src="" alt="模特展示" class="model-image">
                
                <!-- 右侧操作按钮 -->
                <div class="action-buttons">
                    <div class="action-button">
                        <div class="action-icon size-icon"></div>
                        <div class="action-text">尺码</div>
                    </div>
                    <div class="action-button">
                        <div class="action-icon download-icon"></div>
                        <div class="action-text">下载</div>
                    </div>
                    <div class="action-button">
                        <div class="action-icon profile-icon"></div>
                        <div class="action-text">我的</div>
                    </div>
                    <div class="action-button">
                        <div class="action-icon favorite-icon active"></div>
                        <div class="action-text active">喜欢</div>
                    </div>
                    <div class="action-button">
                        <div class="action-icon more-icon"></div>
                        <div class="action-text">更多</div>
                    </div>
                </div>
                
                <!-- 底部浮动按钮 -->
                <div class="floating-panel">
                    <div class="panel-button">
                        <div class="panel-icon grid-icon"></div>
                        <div class="panel-text">加桌面</div>
                    </div>
                    <div class="panel-button">
                        <div class="panel-icon comment-icon"></div>
                        <div class="panel-text">反馈</div>
                    </div>
                    <div class="panel-button">
                        <div class="panel-icon share-icon"></div>
                        <div class="panel-text">分享</div>
                    </div>
                </div>

                <!-- 底部上传和尺寸信息 -->
                <div class="bottom-info">
                    <div class="upload-button">
                        <div class="camera-icon"></div>
                        <span>上传自己照片 ></span>
                    </div>
                    <div class="size-info">
                        <div class="profile-icon-small"></div>
                        <span>165cm 55kg</span>
                        <span class="arrow-right"></span>
                        <span class="new-tag">NEW</span>
                    </div>
                </div>

                <!-- 水印 -->
                <div class="watermark">@时空衣橱AI</div>
            </div>
        </div>

        <!-- 导航标签 -->
        <div class="nav-tabs">
            <div class="nav-tab">星座运势</div>
            <div class="nav-tab active">全部商品</div>
            <div class="nav-tab">换背景</div>
            <div class="nav-tab">换脸</div>
            <div class="nav-tab">我的衣橱</div>
            <div class="search-icon"></div>
        </div>

        <!-- 分类菜单 - 根据导航标签动态显示 -->
        <div class="category-tabs" id="category-tabs-container">
            <!-- 根据当前页面动态显示分类标签 -->
            <div class="category-tab active">全部</div>
            <div class="category-tab">连衣裙</div>
            <div class="category-tab">T恤</div>
            <div class="category-tab">牛仔裤</div>
            <div class="category-tab">衬衫</div>
            <div class="category-tab">外套</div>
            <div class="category-tab">休闲</div>
        </div>

        <!-- 换背景特定标签组 - 隐藏，由JavaScript动态切换 -->
        <div class="category-tabs" id="change-bg-tabs" style="display: none;">
            <div class="category-tab active">全部</div>
            <div class="category-tab">户外</div>
            <div class="category-tab">室内</div>
            <div class="category-tab">商务</div>
        </div>

        <!-- 星座运势特定标签组 - 隐藏，由JavaScript动态切换 -->
        <div class="category-tabs" id="horoscope-tabs" style="display: none;">
            <div class="category-tab active">今日运势</div>
            <div class="category-tab">每周运势</div>
            <div class="category-tab">每月运势</div>
            <div class="category-tab">星座匹配</div>
        </div>
        
        <!-- 星座运势内容区 - 隐藏，由JavaScript动态切换 -->
        <div class="horoscope-container" id="horoscope-content" style="display: none;">
            <!-- 生日输入区域 -->
            <div class="birthday-input-section">
                <div class="cosmic-title">
                    <div class="star-icon"></div>
                    <h2>输入生日，查看专属星座运势</h2>
                    <div class="star-icon"></div>
                </div>
                <div class="birthday-form">
                    <input type="date" id="birthday-picker" class="birthday-picker">
                    <button id="check-horoscope-btn" class="check-horoscope-btn">查看我的星座运势</button>
                </div>
                <div class="registered-birthday">
                    <p>已记录生日：<span id="saved-birthday">暂未设置</span></p>
                    <p>您的星座：<span id="user-sign">未知</span></p>
                </div>
            </div>
            
            <!-- 星座运势展示区 -->
            <div class="horoscope-display" id="horoscope-display">
                <div class="horoscope-card">
                    <div class="horoscope-header">
                        <div class="sign-icon" id="sign-icon"></div>
                        <div class="sign-info">
                            <h3 id="sign-name">星座名称</h3>
                            <p id="horoscope-date">日期</p>
                        </div>
                    </div>
                    
                    <div class="horoscope-indices">
                        <div class="index-item">
                            <div class="index-title">综合指数</div>
                            <div class="index-bar-container">
                                <div class="index-bar" id="all-index"></div>
                                <div class="index-value" id="all-value">--</div>
                            </div>
                        </div>
                        <div class="index-item">
                            <div class="index-title">健康指数</div>
                            <div class="index-bar-container">
                                <div class="index-bar" id="health-index"></div>
                                <div class="index-value" id="health-value">--</div>
                            </div>
                        </div>
                        <div class="index-item">
                            <div class="index-title">爱情指数</div>
                            <div class="index-bar-container">
                                <div class="index-bar" id="love-index"></div>
                                <div class="index-value" id="love-value">--</div>
                            </div>
                        </div>
                        <div class="index-item">
                            <div class="index-title">财运指数</div>
                            <div class="index-bar-container">
                                <div class="index-bar" id="money-index"></div>
                                <div class="index-value" id="money-value">--</div>
                            </div>
                        </div>
                        <div class="index-item">
                            <div class="index-title">工作指数</div>
                            <div class="index-bar-container">
                                <div class="index-bar" id="work-index"></div>
                                <div class="index-value" id="work-value">--</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="horoscope-lucky">
                        <div class="lucky-item">
                            <span class="lucky-label">幸运色：</span>
                            <span class="lucky-value" id="lucky-color">--</span>
                        </div>
                        <div class="lucky-item">
                            <span class="lucky-label">幸运数字：</span>
                            <span class="lucky-value" id="lucky-number">--</span>
                        </div>
                        <div class="lucky-item">
                            <span class="lucky-label">速配星座：</span>
                            <span class="lucky-value" id="lucky-sign">--</span>
                        </div>
                    </div>
                    
                    <div class="horoscope-summary">
                        <h4>今日概述</h4>
                        <p id="horoscope-summary-text">--</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 商品列表 - 分页面显示 -->
        <!-- 全部商品列表 -->
        <div class="product-list" id="all-products" style="display: flex;">
            <!-- 全部商品内容 -->
        </div>
        
        <!-- 背景列表 -->
        <div class="product-list" id="background-list" style="display: none;">
            <div class="product-item">
                <div class="product-image-container">
                    <img src="" alt="海滩背景" class="product-image">
                </div>
                <div class="product-title">海滩度假背景</div>
            </div>
            <div class="product-item">
                <div class="product-image-container">
                    <img src="" alt="森林背景" class="product-image">
                </div>
                <div class="product-title">森林探险背景</div>
            </div>
            <div class="product-item">
                <div class="product-image-container">
                    <img src="" alt="商务背景" class="product-image">
                </div>
                <div class="product-title">高级办公室背景</div>
            </div>
        </div>
        
        <!-- 换脸列表 -->
        <div class="product-list" id="face-change-list" style="display: none;">
            <div class="product-item">
                <div class="product-image-container">
                    <img src="" alt="女明星脸" class="product-image">
                </div>
                <div class="product-title">女明星同款脸型</div>
            </div>
            <div class="product-item">
                <div class="product-image-container">
                    <img src="" alt="电子脸" class="product-image">
                </div>
                <div class="product-title">AI优化脸型</div>
            </div>
        </div>
        
        <!-- 我的衣橱 - 衣柜展示 -->
        <div class="wardrobe-container" id="my-wardrobe" style="display: none;">
            <!-- 添加顶部按钮 -->
            <div class="wardrobe-top-actions">
                <button class="wardrobe-top-btn">添加新衣物</button>
                <button class="wardrobe-top-btn">衣柜穿搭推荐</button>
            </div>
            <!-- 使用提供的图片替换原有的衣柜展示内容 -->
            <img src="681752579713_.pic.jpg" alt="我的虚拟衣柜" class="wardrobe-image-full">
        </div>
    </div>

    <script src="main.js"></script>
</body>
</html> 